<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 50px;
        }
    </style>
</head>
<body>
<input type="text" placeholder="数量" id="i1">
<input type="button" value="帅哥" onclick="fn(1)" >
<input type="button" value="美女" onclick="fn(2)" >
<div></div>

<script>
let count=document.querySelector("#i1");
let d=document.querySelector("div");
function fn(x) {
    switch (x) {
        case 1:for (let i = 0; i <count.value ; i++) {
            d.innerHTML+="<img src='帅哥.jpg' >";
        };  break;
        case 2:for (let i = 0; i <count.value ; i++) {
            d.innerHTML+="<img src='美女.webp' >";
        };  break;
    }
}


fn(x)
</script>
</body>
</html>